<template>
	<view class="soilReport" v-if="soilData">
		<!-- /////////////////////////土壤监测 - 基本/////////////////////////-->
		<view class="basic">
			<view class="one borderB1">
				<view class="left">
					<text class="lLabel baseFontLabel">样地号：</text>
					<text class="lValue baseFontValue">{{ '#' + ids }}</text>
				</view>
				<view class="right">
					<text class="rLabel baseFontLabel">综合评价</text>
					<image class="rImage" :src="details.ico" mode="aspectFit"></image>
				</view>
			</view>
			<view class="tow borderB1">
				<view class="item">
					<view class="left baseFontLabel">采集时间：</view>
					<view class="right baseFontValue">{{ details.time }}</view>
				</view>
				<view class="item">
					<view class="left baseFontLabel wsp" v-html="'地         点：'"></view>
					<view class="right baseFontValue">{{ details.place }}</view>
				</view>
			</view>
			<view class="three borderB1">
				<view class="item">
					<view class="baseFontLabel">经度：</view>
					<view class="baseFontValue">{{ details.longitude }}</view>
				</view>
				<view class="item">
					<view class="baseFontLabel wsp" v-html="'海         拔：'"></view>
					<view class="baseFontValue">{{ details.altitude }}</view>
				</view>
				<view class="item">
					<view class="baseFontLabel">纬度：</view>
					<view class="baseFontValue">{{ details.latitude }}</view>
				</view>
				<view class="item">
					<view class="baseFontLabel">地形地貌：</view>
					<view class="baseFontValue">{{ details.topography }}</view>
				</view>
			</view>
			<view class="three borderB1">
				<view class="item">
					<view class="baseFontLabel">坡向：</view>
					<view class="baseFontValue">{{ details.aspect }}</view>
				</view>
				<view class="item">
					<view class="baseFontLabel">土壤质地：</view>
					<view class="baseFontValue">{{ details.soil_geology }}</view>
				</view>
				<view class="item">
					<view class="baseFontLabel">坡位：</view>
					<view class="baseFontValue">{{ details.slope_position }}</view>
				</view>
				<view class="item">
					<view class="baseFontLabel">土壤类型：</view>
					<view class="baseFontValue">{{ details.soil_types }}</view>
				</view>
			</view>
			<view class="three">
				<view class="item">
					<view class="baseFontLabel">利用方式：</view>
					<view class="baseFontValue">{{ details.use_way }}</view>
				</view>
				<view class="item">
					<view class="baseFontLabel">利用强度：</view>
					<view class="baseFontValue">{{ details.use_intensity }}</view>
				</view>
			</view>
		</view>
		<view class="borderB20"></view>
		<!-- /////////////////////////土壤监测 - 地标特征/////////////////////////-->
		<view class="landmarkFeatures">
			<view class="title">地标特征</view>
			<view class="four">
				<view class="item">
					<view class="baseFontLabel">枯落物：</view>
					<view class="baseFontValue">{{ details.litter }}</view>
					<view class="icons iconfont" :class="[iconfontType[details.litter]]"></view>
				</view>
				<view class="item">
					<view class="baseFontLabel">立枯：</view>
					<view class="baseFontValue">{{ details.stand_dry }}</view>
					<view class="icons iconfont" :class="[iconfontType[details.stand_dry]]"></view>
				</view>
				<view class="item">
					<view class="baseFontLabel">砾石：</view>
					<view class="baseFontValue">{{ details.gravel }}</view>
					<view class="icons iconfont" :class="[iconfontType[details.gravel]]"></view>
				</view>
				<view class="item">
					<view class="baseFontLabel wsp" v-html="'覆    沙：'"></view>
					<view class="baseFontValue">{{ details.sand_covered }}</view>
					<view class="icons iconfont" :class="[iconfontType[details.sand_covered]]"></view>
				</view>
				<view class="item">
					<view class="baseFontLabel">风蚀：</view>
					<view class="baseFontValue">{{ details.wind_erosion }}</view>
					<view class="icons iconfont" :class="[iconfontType[details.wind_erosion]]"></view>
				</view>
				<view class="item">
					<view class="baseFontLabel">水蚀：</view>
					<view class="baseFontValue">{{ details.water_erosion }}</view>
					<view class="icons iconfont" :class="[iconfontType[details.water_erosion]]"></view>
				</view>
				<view class="item">
					<view class="baseFontLabel">盐碱斑：</view>
					<view class="baseFontValue">{{ details.S_A_S }}</view>
					<view class="icons iconfont" :class="[iconfontType[details.S_A_S]]"></view>
				</view>
				<view class="item">
					<view class="baseFontLabel">鼠害：</view>
					<view class="baseFontValue">{{ details.damage_rats }}</view>
					<view class="icons iconfont" :class="[iconfontType[details.damage_rats]]"></view>
				</view>
				<view class="item">
					<view class="baseFontLabel">虫害：</view>
					<view class="baseFontValue">{{ details.insect_pest }}</view>
					<view class="icons iconfont" :class="[iconfontType[details.insect_pest]]"></view>
				</view>
			</view>
		</view>
		<view class="borderB20"></view>
		<!-- /////////////////////////土壤监测 - 土壤分析检验报告/////////////////////////-->
		<view class="soilAnalysis">
			<view class="title">
				<view class="left"></view>
				<view class="center">土壤分析检验</view>
				<view @click="ejectShow = true" class="right iconfont">&#xe647;</view>
			</view>
			<view class="tabWar">
				<view class="row tabTitle">
					<view class="item">检测时间</view>
					<view class="item">检测项目</view>
					<view class="item">检测结果</view>
					<view class="item">单位</view>
				</view>
				<view class="row" v-for="(item, index) in list" :key="index">
					<view class="item">{{ item.createDate }}</view>
					<view class="item">{{ item.project }}</view>
					<view class="item blue">{{ item.testResult }}</view>
					<view class="item">{{ item.company }}</view>
				</view>
			</view>
		</view>
		<eject :showNum="1" :show.sync="ejectShow"></eject>
	</view>
</template>

<script>
import eject from './eject.vue';
export default {
	name: 'soilReport',
	props: {
		ids: {
			type: [Number, String],
			default: 0
		},
		soilData: {
			type: Object,
			default: () => {
				return null;
			}
		}
	},
	computed: {
		details: function({ soilData }) {
			let value = null;
			if (soilData != null) {
				value = soilData.collect[0];
			}
			return value;
		},
		list: function({ soilData }) {
			let value = null;
			if (soilData != null) {
				value = soilData.change;
			}
			return value;
		}
	},
	data() {
		return {
			ejectShow: false,
			iconfontType: {
				有: 'icon-you',
				无: 'icon-wu',
				少: 'icon-shao',
				多: 'icon-duo'
			}
		};
	},
	methods: {},
	components: {
		eject
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/css/asd.scss';
.soilReport {
	background-color: transparent;
	@include aReport();
	/* ----------------------土壤监测 - 地标特征---------------------- */
	.landmarkFeatures {
		width: 100%;
		// background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #f9f6ee;
		.title {
			box-sizing: border-box;
			text-align: center;
			font-size: 32rpx;
			line-height: 1;
			font-family: PingFang SC;
			font-weight: 500;
			color: #7b8e96;
			padding: 50rpx 0 60rpx 0;
		}
		.item {
			width: 33rpx;
		}
	}
	/* ----------------------土壤监测 - 土壤分析检验报告---------------------- */
	.soilAnalysis {
		width: 100%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		padding: 0;
		box-sizing: border-box;
		.title {
			line-height: 1;
			font-size: 48rpx;
			font-family: PingFang SC;
			color: #7b8e96;
			font-weight: 700;
			background-color: #e8f0f6;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			padding: 45rpx 67rpx;
			.right {
				color: #a4d7ee;
				font-size: 40rpx;
			}
		}
		.tabWar {
			@include ejectList(4);
		}
	}
}
</style>
